<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-06 11:16:43
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.deliver-goods
  .title.flex.justify-center.bold.mb4 审核
  .form-content.flex
    .require.w100
      el-form(
        ref="formRef",
        :model="form",
        :rules="rules",
        label-position="left",
        label-width="100px",
        status-icon
      ) 
        |
        |
        |
        |
        el-form-item(label="审核结果", prop="status")
          el-radio-group(v-model="status", @change="radioChange")
            el-radio(:label="20") 通过
            el-radio(:label="30") 驳回
        el-form-item(label="驳回理由", prop="reason", v-if="status == 30")
          el-input(
            v-model="form.reason",
            placeholder="请输入",
            type="textarea",
            clearable
          )
      .flex.justify-center.mt4.mb4
        el-button.btn(
          type="primary",
          size="large",
          plain,
          round,
          @click="onCancel(formRef)"
        ) 取消
        el-button.btn(
          type="primary",
          size="large",
          round,
          @click="onConfirm(formRef)"
        ) 确认
</template>
        
    <script setup>
import { onMounted, ref } from "vue";
import { OrderReview } from "@/api/easymain";
const props = defineProps({
  rowId: "",
});
onMounted(() => {
  console.log("roewefw", props.rowId);
  form.value.id = props.rowId;
});
const status = ref(20);
const formRef = ref();
const rules = ref({
  reason: [
    {
      required: true,
      message: "请输入驳回理由",
      trigger: "blur",
    },
  ],
});
const form = ref({
  id: "",
  status: 20,
  reason: "",
  returnurl: "",
});

const radioChange = (val) => {
  console.log("dsvmds", val);
  form.value.status = val;
};

const emits = defineEmits(["cancel", "confirm"]);

// 取消
const onCancel = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  emits("cancel");
};

const onConfirm = (formEl) => {
  if (form.value.status == 30 && form.value.reason == "") {
    ElMessage({ message: "请填写驳回理由", type: "error" });
    return;
  }

  if (form.value.status == 20) {
    form.value.reason = "";
  }
  OrderReview(form.value)
    .then((res) => {
      if (res.code == 1) {
        console.log("res", res.data);
        router.back();
        emits("confirm");
      }
      if (res.code == 0) {
        ElMessage({ message: res.msg, type: "warning" });
        emits("confirm");
      }
    })
    .catch((err) => {
      // ElMessage({ message: err.msg, type: "error" });
      emits("confirm");
    });
};
</script>
     <style lang="stylus" scoped>
     .deliver-goods {
       .title {
         font-size: 24px;
       }

       .form-content {
         padding: 0px 66px;

         .require {
           padding: 16px 12px 0px 12px;
           border: 1px solid #E6E6E6;
         }

         .no-require {
           margin-left: 32px;
           padding: 16px 12px;
           border: 1px solid #E6E6E6;
         }
       }

       .input-width {
         width: 245px;
       }

       .btn {
         width: 178px;
       }

       .overdue {
         color: #E84026;
       }

       .refund {
         color: #2487E8;
       }

       .no-quota {
         margin-top: 200px;
       }

       // 上传图片相关
       .avatar-uploader .el-upload {
         border: 1px dashed #dcdfe6;
         border-radius: 6px;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         transition: var(--el-transition-duration-fast);
       }

       .avatar-uploader .el-upload:hover {
         border-color: #dcdfe6;
       }

       .el-icon.avatar-uploader-icon {
         font-size: 28px;
         color: #8c939d;
         width: 152px;
         height: 100px;
         text-align: center;
         border: 1px dashed #dcdfe6;
       }

       .avatar-uploader .avatar {
         width: 152px;
         height: 100px;
         display: block;
       }
     }
</style>
              